<template>
    <h1>个人中心</h1>
    <p><span>用户名：{{userStore.userName }}</span> </p>
    <div class="flex">
    <el-button type="primary" @click="friendListIsView = true">查看好友列表</el-button>
    <el-button type="primary" @click="friendRequestListIsView = true">查看我的好友申请列表</el-button>
    <el-button type="primary" @click="chatRoomListIsView = true">查看我的聊天室列表</el-button>
    <el-upload style="margin-left: 10px;" :show-file-list="false" :on-error="showError" :on-success="flush" :action="api.url+'/uploadAvatar/' + userStore.userId" :headers="api.header" >
        <template #trigger>
            <el-button type="primary">更换头像</el-button>
        </template>
    </el-upload>
    </div>
    <el-drawer v-model="friendListIsView" title="好友列表" size="20%">
        <el-row class="row" v-for="(friend,index) in userStore.friendList" :key="index">
            <el-col :span="17">{{ friend.userName }}</el-col>
            <el-col :span="4"><el-button type="primary" @click="api.deleteFriend(friend.userId)"> 删除好友</el-button></el-col>
        </el-row>
    </el-drawer>
    <el-drawer v-model="friendRequestListIsView" title="我的好友申请列表" size="20%">
        <el-row class="row" v-for="(friend,index) in userStore.friendRequestList" :key="index">
            <el-col :span="17">{{ friend.userName }}</el-col>
            <el-col :span="4"><el-button type="primary" @click="api.addFriend(friend.userId)" > 同意请求 </el-button></el-col>
        </el-row>
    </el-drawer>
    <el-drawer v-model="chatRoomListIsView" title="我的聊天室" size="20%">
        <el-row class="row" v-for="(chatRoom,index) in publicMessageStore.myChatRoomList" :key="index">
            <el-col :span="17">{{ chatRoom.chatRoomName }}</el-col>
            <el-col :span="4"><el-button type="primary" @click=" api.deleteMychatRoom(chatRoom.id)" > 退出聊天室 </el-button></el-col>
        </el-row>
    </el-drawer>
    
</template>
<script setup>
import {ref} from 'vue'
import {publicMessage, useUser} from '@/store/index'

import api from '@/api/service'
import { ElMessage } from 'element-plus';
//import url from '@/api/service'
const userStore = useUser();
const publicMessageStore = publicMessage();
//好友列表的抽屉是否可见
const friendListIsView = ref(false);
//好友申请的抽屉是否可见
const friendRequestListIsView = ref(false);
//聊天室列表的抽屉是否可见
const chatRoomListIsView = ref(false);
//显示上传失败
const showError = () =>{
  ElMessage.error("上传失败");
}
//浏览器刷新
const flush = ()=>{
    location.reload();
}

</script>
<style scoped>
.row{
    margin-top:20px
}
.flex{
    display: flex;
}
</style>